<template>
    <page-layout>
        <template v-slot:header>
            <el-input v-model="query.name" placeholder="请输入用户名字" size="mini" style="width:250px;padding:0 12px"/>
            <el-button @click="queryEvt" size="mini" type="primary">查询</el-button>
            <el-button @click="addEvt" size="mini" type="success">新增</el-button>
        </template>
        <el-table :data="userList" style="width: 100%" height="100%" :row-class-name="tableRowClassName" >
            <el-table-column prop="id" label="用户编码" width="150" fixed="left"></el-table-column>
            <el-table-column prop="state" label="状态" width="80" fixed="left">
                <template v-slot="{ row: { state }}">
                    <div v-mystate="state"/>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="80" fixed="left"></el-table-column>
            <el-table-column prop="sex" label="男" width="80"></el-table-column>
            <el-table-column prop="dept" label="所属部门" width="100"></el-table-column>
            <el-table-column prop="position" label="职位" width="100"></el-table-column>
            <el-table-column prop="birthday" label="生日" width="100"></el-table-column>
            <el-table-column prop="induction" label="入职日期" width="120"></el-table-column>
            <el-table-column prop="phone" label="电话号码" width="120"></el-table-column>
            <el-table-column prop="address" label="用户住址址" width="180" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" width="100" fixed="right" >
                <template slot-scope="{ row }">
                    <el-button  v-if="row.state === 0" type="text" size="small" style="margin:0 7px;color:#85ce61" @click="updateEvt(row)">激活</el-button>
                    <el-popconfirm :title="`确定删除【${row.name}】用户的信息吗？`" :key="row.state" @confirm="deleteEvt(row)">
                        <template v-if="row.state === 1">
                            <el-button slot="reference"  style="margin: 0 6px;color:red" type="text" size="small" >冻结</el-button>
                        </template>
                    </el-popconfirm>
                    <el-button @click="goUpdateEvt(row.name,row.id)" type="text" size="small" style="margin:0 7px">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <template v-slot:footer>
            <el-pagination :page-sizes="[20, 40, 70, 100]"
                :page-size="query.size"
                :current-page="query.page"
                @size-change="sizeChange"
                @current-change="currentChange"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"/>
        </template>
    </page-layout>
</template>
<script>
import { userListApi,userDeleteApi,userUpdateApi} from '@/apis/userApi'
import { enCodeApi } from '@/util'
    export default{
        data(){
            return{
                userList:[],
                query:{
                    page:1,
                    size:20,
                    name:''
                },
                total:0,
                queryTimer:null,
            }
        },
        directives: {
            mystate(el, {value}) {
                let obj = {
                    '0': {text: '失效', cls: 'user-state out-time'},
                    '1': {text: '生效', cls: 'user-state in-time'},
                }
                el.setAttribute('class', obj[value].cls)
                el.innerHTML = obj[value].text
            }
        },
        methods:{
            addEvt(){
                this.$router.push('/user/edit')
            },
            goUpdateEvt(name,id){
                sessionStorage.setItem('user',enCodeApi(name +'---'+id))
                this.$router.push('/user/edit')
            },
            async updateEvt(data){
                let updateRes = await userUpdateApi({id:data.id,state:1})
                if(updateRes.code === 200){
                    this.$message.success(`用户【${data.name}】激活成功！`)
                    this.showEvt()
                    return
                }
                this.$message(`用户【${data.name}】激活失败！`)
            },
            async deleteEvt(data){
                let deleteRes = await userDeleteApi(data.id)
                if(deleteRes.code === 200){
                    this.$message.success(`用户【${data.name}】冻结成功！`)
                    this.showEvt()
                    return
                }
                this.$message(`用户【${data.name}】冻结失败！`)
            },
            cancelEvt(){

            },
            queryEvt(){
                this.query.page = 1
                this.showEvt()
            },
            async showEvt(){
                let users = await userListApi(this.query)
                if(users.code === 200){
                    this.userList = users.data.rows
                    this.total = users.data.count
                    this.userList.forEach(it=>{it.sex === 1 ? it.sex = '女' : it.sex = '男'})
                }
            },
            async sizeChange(size){
                this.query.size = size
                if(!this.queryTimer) clearTimeout(this.queryTiemr)
                this.queryTimer = setTimeout(()=>{
                    this.showEvt()
                })
            },
            async currentChange(page){
                this.query.page = page
                if(!this.queryTimer) clearTimeout(this.queryTiemr)
                this.queryTimer = setTimeout(()=>{
                    this.showEvt()
                })
            },
            tableRowClassName({row}) {
                if (row.state === 0) {
                return 'warning-row'
                }else{
                return 'success-row'
                }
            }
        },
        mounted(){
            this.showEvt()
        }
    }
</script>
<style lang="less">
.user-state {
        color: #999;
        &::before {
            content: '';
            display: inline-block;
            vertical-align: middle;
            width: 6px;
            height: 6px;
            border-radius: 6px;
            background: #999;
            margin-right: 6px;
        }
        &.out-time {
            color: red;
            &::before {
                background: red;
            }
        }
        &.in-time {
            color: #85ce61;
            &::before {
                background: #85ce61;
            }
        }
    }
    .el-table .success-row {
        background: #e1f7d6;
    }

    .el-table .warning-row {
        background: #f6f1d2;
    }
</style>